/**
 * 韩雪冬轮播图
 * 1.当页面加载完毕，获取要操作的节点
 * 2.根据数据动态生成轮播图以及控制按钮
 * 3.当前按钮样式变化(on),其他恢复原来样式
 * 4.点击切换，样式，图片宽度，li位置，透明度
 */
//获取元素
var oPrevDiv = document.getElementsByClassName('prev_div')[0],
    oNextDiv = document.getElementsByClassName('next_div')[0],
    hanWord=document.getElementById('han_word'),
    hanUl=document.getElementById('han_ul'),
    hanLi=hanUl.getElementsByTagName('li');

hanUl.innerHTML = '';

// 数组存放在图片的地址，标题,宽度,li样式（模拟数据）
var datas=[{
    hanUrl:"images/1.jpg",
    hanTitle:"图片1",
    },
    {
        hanUrl:"images/2.jpg",
        hanTitle:"图片2",
    },
    {
        hanUrl:"images/3.jpg",
        hanTitle:"图片3",
    },
    {
        hanUrl:"images/4.jpg",
        hanTitle:"图片4",
        hanStyleLi:"pos_4"
    },
    {
        hanUrl:"images/5.jpg",
        hanTitle:"图片5",
    },
    {
        hanUrl:"images/6.jpg",
        hanTitle:"图片6",
    },
    {
        hanUrl:"images/7.jpg",
        hanTitle:"图片7",
    }
]
var hanNum=0;
var arr = [];

// $.ajax({
//     type:"GET",
//     url:"",
//     datatype:"jsonp",
//     data:{},
//     success:function (res) {
//         console.log(res)
//         for(var i=0;i<res.length;i++){
//             var hLi= "pos_"+(i+1);
//             hanUl.innerHTML+='<li class='+hLi+'><img src="' + res[i].honorImgPath + '"/></li>';
//         }
//     }
// })

//往ul里面动态添加li
for(var i=0;i<datas.length;i++){
    hanUl.innerHTML+='<li class="'+ datas[i].hanStyleLi +'">'+'<img src="' + datas[i].hanUrl + '"/>' + '</li>';
}

// 循环li，存成复合数组
for(var i=0;i<hanLi.length;i++){
   
    var  proImg=document.getElementById("han_ul").getElementsByTagName("img");
   
    arr.push( [ parseInt(getStyle(hanLi[i],'left')),parseInt(getStyle(hanLi[i],'top')),getStyle(hanLi[i],'opacity')*100,getStyle(hanLi[i],'zIndex')] );
}
// 切换
function hanTab(hanNum){

    // var  proImg=document.getElementById("han_ul").getElementsByTagName("img");
    for(var i=0;i<hanLi.length;i++){
        var proImg = hanLi[i].getElementsByTagName('img')[0];
        // proImg[hanNum].src=datas[hanNum]['hanUrl'];//改图片的src
        hanWord.innerHTML=datas[hanNum]['hanTitle'];//图片标题
        // console.log("++++++"+datas[hanNum]['hanStyleLi'])
        // hanLi[hanNum].className=datas[hanNum]['hanStyleLi'];//改变li样式
        
        // proImg.style.width=hanImgWidth[hanNum]+'px';//改变图片宽度
        arr.push( [ parseInt(getStyle(hanLi[i],'left')),parseInt(getStyle(hanLi[i],'top')),getStyle(hanLi[i],'opacity')*100,getStyle(hanLi[i],'zIndex')] );
        hanLi[i].style.zIndex = arr[i][3];
    
        startMove(hanLi[i],{left : arr[i][0] , top : arr[i][1] , opacity : arr[i][2] });
    
        startMove( oImg,{ width : arr[i][4] } );
    }
   
}
hanTab(0);

// 点击左边
oPrevDiv.onclick = function(){  
    hanNum--;
    if(hanNum==-1)
        {
            hanNum=datas.length-1;
        }
    arr.push(arr[0]);
    arr.shift();
    hanTab(hanNum);
};

//点击右边
oNextDiv.onclick = function(){
    hanNum++;
    if(hanNum==datas.length)
        {
            hanNum=0
        }
    arr.unshift(arr[arr.length-1]);
    arr.pop();
    hanTab(hanNum);
};

//获取css属性的值
function getStyle(obj,attr){
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    }
    else{
        return getComputedStyle(obj,false)[attr];
    }

};

// JavaScript Document

function startMove(obj,json,endFn){

    clearInterval(obj.timer);

    obj.timer = setInterval(function(){

        var bBtn = true;

        for(var attr in json){

            var iCur = 0;

            if(attr == 'opacity'){
                if(Math.round(parseFloat(getStyle(obj,attr))*100)==0){
                    iCur = Math.round(parseFloat(getStyle(obj,attr))*100);

                }
                else{
                    iCur = Math.round(parseFloat(getStyle(obj,attr))*100) || 100;
                }
            }
            else{
                iCur = parseInt(getStyle(obj,attr)) || 0;
            }

            var iSpeed = (json[attr] - iCur)/8;
            iSpeed = iSpeed >0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
            if(iCur!=json[attr]){
                bBtn = false;
            }

            if(attr == 'opacity'){
                obj.style.filter = 'alpha(opacity=' +(iCur + iSpeed)+ ')';
                obj.style.opacity = (iCur + iSpeed)/100;

            }
            else{
                obj.style[attr] = iCur + iSpeed + 'px';
            }


        }

        if(bBtn){
            clearInterval(obj.timer);

            if(endFn){
                endFn.call(obj);
            }
        }

    },30);

}


function getStyle(obj,attr){
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    }
    else{
        return getComputedStyle(obj,false)[attr];
    }
}